<!-- 表格搜索 -->
<template>
	<div class="mine-table-search">
		<el-popover
		popper-class="mine-popper"
    placement="bottom"
		trigger="click"
    width="200"
    v-model="popoverVisable">
		<!-- <el-input @keyup.enter.native="searchSubmit" v-model="searchInput" placeholder="请输入内容" size="small" suffix-icon="el-icon-search"></el-input> -->
		<el-input @keyup.enter.native="searchSubmit" v-model="searchInput" placeholder="请输入内容" size="small">
      <i class="iconfont icon-search-line input-search" slot="suffix" @click="searchSubmit"></i>
    </el-input>
		<i class="iconfont icon-search-line search" :class="{'active': searchInput}" slot="reference"></i>
  </el-popover>
	</div>
</template>

<script>
export default {

  props: {
    name: {
			type: String,
      default: "",
		},
  },

	data: function () {
		return {
			popoverVisable: false, // 是否显示弹出框
			searchInput: "", // 搜索框输入的内容
		}
	},

	methods: {

		// 展示弹出框
		showPopover: function () {
			this.popoverVisable = !this.popoverVisable;
		},

		// 提交搜索内容
		searchSubmit: function () {
			this.$emit("searchSubmit", { key: this.name, value: this.searchInput });
			this.popoverVisable = false;
		}
	}
}
</script>

<style lang="less" scoped>
  @import '~@/style/variables.less';

	.mine-table-search {
		display: inline;
		margin-left: 10px;
	}

	.search {
		font-size: 14px !important;
		color: #8c8c8c;
		cursor: pointer;
		font-weight: 500;
    outline: none;
    &.active {
      color: @--color-primary;
    }
	}

  .input-search {
    line-height: 32px;
    padding: 10px 5px;
    cursor: pointer;
  }
</style>
